<template>
  <el-dialog style="height:100% " title="title" :visible.sync="dialogShow" width="80%"  append-to-body>
    <component :is="dynamicComponent" ref="listSelect"></component>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="transListValue">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "tagSelectDialog",

  props: {
    title: {
      type: String,
      required: true
    },
    listSelectShow: {
      type: Boolean,
      required: false,
      default: false
    },
    selectPath: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      dialogShow:this.listSelectShow,
      dynamicComponent: null
    };
  },

  watch: {
    listSelectShow: {
      immediate: true,
      handler(value) {
        if (value) {
          this.dialogShow = value;
          this.loadComponent();
        }
      }
    },
  },

  methods: {
    // loadComponent() {
    //   const componentPath = this.selectPath;
    //   const context = require.context("@/views", true, /\.vue$/);
    //   const component = context(`${componentPath}`).default;
    //
    //   this.dynamicComponent = component;
    // },
    loadComponent() {
      const componentPath = this.selectPath+'.vue';
      const context = require.context('@/views', true, /\.vue$/);
      const component = context(`./${componentPath}`).default;

      this.dynamicComponent = component;
    },

    transListValue() {
      this.$emit("getListValue", this.$refs.listSelect.selectedTags);
    },

    cancel() {
      this.dialogShow = false;
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>
